<template>
  <div>
    <el-dialog
      title="数据记录"
      :visible.sync="dialogVisible"
      width="1200px"
      :before-close="closeAddDialog"
    >
      <div class="header">
        <div class="header_left">
          <el-select
            v-model="searchForm.dataType"
            filterable
            placeholder="数据类型"
            size="small"
            style="width: 180px; margin-left: 15px"
            @visible-change="selectChange"
            clearable
          >
            <el-option
              v-for="(item, i) in dataTypeList"
              :key="i"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
            <!-- <div
              class="div_box"
              v-loading="loading"
              :style="loading ? '' : 'display: none;'"
            ></div> -->
          </el-select>
          <el-select
            v-model="searchForm.pushResult"
            filterable
            placeholder="推送结果"
            size="small"
            style="width: 180px; margin-left: 15px"
            @visible-change="selectChange"
            clearable
          >
            <el-option
              v-for="(item, i) in pushResultList"
              :key="i"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="searchForm.pushTime"
            size="small"
            type="datetime"
            placeholder="推送时间"
            style="width: 200px; margin-left: 15px"
          >
          </el-date-picker>
          <el-input
            v-model="searchForm.oid"
            clearable
            @clear="onClear"
            placeholder="请输入时间唯一流水号oid"
            size="small"
            style="width: 260px; margin-left: 15px"
            maxlength="50"
            oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
          >
            <el-button
              slot="append"
              :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
              @click="onClear"
            >
            </el-button>
          </el-input>
        </div>
        <div class="header_right"></div>
      </div>
      <div class="content">
        <el-table
          :data="dataList"
          height="calc(100% - 65px)"
          :header-cell-style="headerStyle"
          class="table"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="60"
            height="30"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="oid"
            label="oid"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="uid"
            label="设备编码"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="dataType"
            label="数据类型"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pushContent"
            min-width="120"
            label="推送内容"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pushTime"
            label="推送时间"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pushResult"
            label="推送结果"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="content"
            label="响应内容"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <!-- <pagination
          :page.sync="page"
          :limit.sync="limit"
          :total="total"
          :pageSizes="[10, 20, 30, 50]"
          @pagination="getDataList"
          class="pagination"
        /> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqManufacturerAdd } from "@api/api";
import tableStyleMixin from "@mixin/table-style";
export default {
  mixins: [tableStyleMixin],
  props: [],
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        dataType: "",
        pushTime: "",
        pushResult: "",
        oid: "",
      },
      loadingSearch: false,
      dataList: [
        {
          oid: "",
          uid: "",
          dataType: "",
          pushContent: "",
          pushTime: "",
          pushResult: "",
          content: "",
        },
      ],
      dataTypeList: [
        {
          label: "告警信息",
          value: 1,
        },
        {
          label: "报警处理通知",
          value: 2,
        },
        {
          label: "故障通知",
          value: 3,
        },
        {
          label: "故障处理通知",
          value: 4,
        },
        {
          label: "在离线通知",
          value: 5,
        },
      ],
      pushResultList: [
        {
          label: "成功",
          value: 1,
        },
        {
          label: "失败",
          value: 2,
        },
      ],
    };
  },
  watch: {},
  methods: {
    // 下拉请求列表
    selectChange(val) {
      console.log(val, "val");
      if (val) {
        // this.getProductList();
      }
    },
    onClear() {
      console.log("请求列表");
    },

    // 点击关闭弹框
    closeAddDialog() {
      //   this.$refs.refAddForm.resetFields();
      this.dialogVisible = false;
    },
    // 点击删除
    clickDel(index) {
      this.addForm.chargeUsers.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");
</style>
